<template>
	<view class="container">
		<view class="serviceCate">
				<view @click="serviceCateTap('activityList')" class="item"
				style="background-image: linear-gradient(90deg, #9777eb, #9fa3fb);">
					<image src="https://oss.qly.plus/lessee1/1_minipro/2022/11/29/vsnK0lKsLf61.png" style="width: 80rpx;height: 80rpx;border-radius: 12rpx;"></image>
					<view style="margin-top: 12rpx;color: #FFF;">悬赏任务</view>
				</view>
				<view @click="serviceCateTap('memberPay')" class="item"
				style="background-image: linear-gradient(90deg, #ec7591, #f18ea6);">
					<image src="https://oss.qly.plus/lessee1/1_minipro/2022/11/29/ec6PccQdn961.png" style="width: 80rpx;height: 80rpx;border-radius: 12rpx;"></image>
					<view style="margin-top: 12rpx;color: #FFF;">失物招领</view>
				</view>
			</u-grid>
		</view>
		<view style="background-color: #FFF;margin-top: 20rpx;">
			<u-tabs :list="tabsForTags" :current="current" :scrollable='true' @click="tabClick" lineColor="#DD4949" :activeStyle="{color: '#DD4949'}"></u-tabs>
		</view>
		<view class="list">
			<articleItem :item='item' :index='index' @heart='heart' @headImgAction='headImgAction' v-for='(item, index) of itemList' :key='index'></articleItem>
		</view>
		<view style="padding-top: 300rpx;" v-if='showEmpty'>
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		<view class="publish" @click="publishHandle">
			<u-icon name="edit-pen" color="#fff" size="46rpx"></u-icon>
			<text style="font-size: 26rpx;">发布</text>
		</view>
		<jcTabbarItem :current="currentTabbarIndex" :list='dynamicTabbar'></jcTabbarItem>
	</view>
</template>

<script>
	import {
		article
	} from "@/api/article.js"

	import articleItem from '@/pages/circle/components/articleItem.vue'
	import jcTabbarItem from '@/components/jc-tabbarItem/index.vue'
	import {
		tabbarItem
	} from "@/api/tabbarItem.js"
	export default {
		components: {
			articleItem,
			jcTabbarItem
		},
		data() {
			return {
				page: 1,
				size: 10,
				showEmpty: false,
				isLastPage: '',
				itemList: [],
				dynamicTabbar: [],
				currentTabbarIndex: 0,
				tabsForTags: []
			}
		},
		onLoad() {
			this.dynamicTabbar = this.$store.getters.getDynamicTabbar
			var	tabbars = this.dynamicTabbar.filter(item=>item.key == this.$Route.name)
			this.currentTabbarIndex = tabbars.length>=1?tabbars[0].sort:'0'
			
			this.findArticleList()
			var that = this
			uni.$on('findKey', function(data) {
				console.log("收到通知，刷新数据")
				that.findArticleList()
			})
		},
		onUnload() {
			uni.$off('findKey')
		},
		onPullDownRefresh() {
			this.page = 1
			this.findArticleList()
		},
		onReachBottom() {
			console.log('上拉加载更多')
			if (!this.isLastPage) {
				return
			}
			this.findArticleList()
		},
		methods: {
			serviceCateTap(val){
				if(val == 'memberPay'){
					this.$Router.push({
						name: val,
						params: {
							item: 3
						}
					})
				}else{
					this.$Router.push({
						name: val
					})
				}
			},
			headImgAction(userInfo){
				console.log('userInfo', userInfo)
				this.$Router.push({
					name: 'itemDetail',
					params: {
						userId: userInfo.id,
						flag: '1'
					}
				})
			},
			heart(index){
				// if(!checkInfoRegister()) return
				var item = this.itemList[index]
				item.isHeart = !item.isHeart
				if(item.isHeart){
					item.heartNums++
				}else{
					item.heartNums--
				}
				this.$forceUpdate()
				article.heart({
					articleId: item.id
				}).then(res => {
					if (res.data.code == 10000) {
						
					}
				})
			},
			findArticleList(){
				article.getArticleList({
					page: this.page,
					size: this.size
				}).then(res => {
					uni.stopPullDownRefresh()
					if (res.data.code == 10000) {
						if(this.page == 1){
							this.itemList = []
						}
						var list = res.data.data.list
						this.itemList = [...this.itemList, ...list]
						this.showEmpty = this.itemList.length<1
						if(res.data.data.next){
							this.page++
						}else{
							this.isLastPage = true
						}
					}
				})
			},
			publishHandle(){
				// if(!checkInfoRegister()) return
				this.$Router.push({
					name: 'publish'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding-bottom: 60rpx;
	}
	.serviceCate{
		background-color: #FFFFFF;
		padding: 20rpx 0;
		display: flex;
		flex-direction: row;
		.item{
			width: 345rpx;
			height: 180rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;
			border-radius: 12rpx;
		}
	}
	.list{
		margin-top: 1px;
		display: flex;
		flex-direction: column;
		background-color: #FFF;
	}
	.publish{
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: #e66e8e;
		position: fixed;
		right: 40rpx;
		bottom: 200rpx;
		box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, 0.3);
	}
	
</style>
